import { generatorTableHeight } from "@Components/assets/js/common";
import { debounce } from '@/utils'
export default {
  props: {
    toolPermission:{
      type:String
    },
    // 【载体id】
    monitorId: {
      type: String,
      default: null
    },
    // 【载体占用空间】
    monitorSpace: {
      type: Number,
      default: 0
    },
  },
  computed: {
    // 头部导航栏高度
    headClientHeight() {
      return this.$store.getters.headClientHeight
    }
  },
  data() {
    return {
      throttleResizeConfig: null,
      // 【弹窗分栏处理】
      splitpanesDocument: null,
      // 【状态切换】
      rockState: false,
      // 【防止再次执行】
      onLoadClose:false,
      // 【防抖】
      handleTableHeightDebounce: null,
      mountedHandleTableDebounce:null,
    }
  },
  watch: {
    headClientHeight() {
      if (this.monitorId) return
      const split = this.$refs?.[`${this.name}_Splitpanes`]
      this.handleTableHeightDebounce(split ? split.panes : undefined)
    }
  },
  created() {
    this.handleTableHeightDebounce = debounce(this.handleTableHeight, 100)
    this.mountedHandleTableDebounce = debounce(this.mountedHandleTable, 100)
  },
  mounted() {
    this.mountedHandleTable()
  },
  methods: {
    mountedHandleTableOnLoad(){
      if(this.onLoadClose) return
      this.onLoadClose = true
      this.mountedHandleTableDebounce()
    },
    mountedHandleTable() {
      this.$nextTick(() => {
        try {
          const split = this.$refs?.[`${this.name}_Splitpanes`]
          if (split) {
            let doc = split.$el
            doc.style.height = doc.parentNode.clientHeight + 'px'
            this.splitpanesDocument = doc
          }

          // 监听载体的变化
          if (this.monitorId) {
            let monitorDoc = document.getElementById(this.monitorId)
            if (!this.splitpanesDocument) {
              this.splitpanesDocument = this.$refs?.[`${this.name}_table`].$el.parentNode
              this.splitpanesDocument.style.height = monitorDoc.clientHeight - this.monitorSpace + 'px'
            }
            let mutationObserver = new MutationObserver(() => {
              this.splitpanesDocument.style.height = monitorDoc.clientHeight - this.monitorSpace + 'px'
              this.handleTableHeightDebounce(split ? split.panes : undefined)
            });
            mutationObserver.observe(monitorDoc, { 'attributes': true });
            this.handleTableHeightDebounce(split ? split.panes : undefined)
            return
          }
          this.$nextTick(() => {
            this.handleTableHeightDebounce(split ? split.panes : undefined)
          });
          // 监听resize事件
          window.addEventListener("throttleResize", () => {
            const split = this.$refs?.[`${this.name}_Splitpanes`]
            this.handleTableHeightDebounce(split ? split.panes : undefined)
          });
        } catch (error) {
          return error
        }
      })
    },
    getRockState(key) {
      if (key == 'size') {
        const split = this.$refs?.[`${this.name}_Splitpanes`]
        if (this.rockState == 0) {
          split.panes[0].size = 70
          split.panes[1].size = 30
        } else {
          split.panes[0].size = 100
          split.panes[1].size = 0
        }
        this.$nextTick(() => {
          this.handleTableHeight(split ? split.panes : undefined)
        });
      }
      return this.rockState
    },
    // 切换风格
    changeRock() {
      this.rockState = this.rockState ? false : true
      this.getRockState('size')
    },
    // 计算表格高度
    handleTableHeight(arg) {
      let key = 'config'
      let params = this?.[key]?.heightParams ?? []
      params = params.map(item => (`.${this.name}${item}`));
      if (this.throttleResizeConfig?.key) {
        key = this.throttleResizeConfig.key
      }
      if (this.throttleResizeConfig?.param) {
        params = this.throttleResizeConfig.param
      }
      let paneSize = (arg && arg?.[0]?.size) ? arg[0].size : 100
      this[key].height = this.height ?? generatorTableHeight(
        {
          paneSize: paneSize,
          headHeight: this.splitpanesDocument ? 0 : this.headClientHeight
        },
        params,
        0,
        this.splitpanesDocument
      );
    },
  }
}
